<template>
  <div>
     <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <Row :gutter="20">
      <Col span="18">
        <chart-radar
          :value="chart_radar"
          style="height: 490px"
          :text="chart_radar.text"
          :max="max"
        ></chart-radar>
      </Col>
       <Col span="5">
        <div style="top: 50px;right:50px;">
          <Form label-position="top" class="inputs" :label-width="150">
            <Divider orientation="left">图表名称</Divider>
            <div style="margin-bottom: 40px">
              <FormItem>
                <Input v-model="chart_radar.text" placeholder="请输入图表名称"/>
              </FormItem>
            </div>
            <div style="margin-bottom: 40px">
              <Divider orientation="left">图例修改</Divider>
              <FormItem
                v-for="(item, index) in chart_radar.yData"
                :key="index"
              >
                <Input v-model="item.name"></Input>
              </FormItem>
            </div>
            <div style="margin-bottom: 40px">
              <Divider orientation="left">最大数值</Divider>
              <FormItem
                :label="item.name"
                v-for="(item, index) in max"
                :key="index"
              >
                <Input v-model="item.max"></Input>
              </FormItem>
            </div>
          </Form>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import ChartRadar from "@/components/charts/radar.vue";
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: "rader",
  components: {
    HelloWorld,
    ChartRadar
  },
  data() {
    return {
      chart_radar: {
        text: "我是雷达图",
        yData: [
          {
            value: [0, 0, 0, 1.11, 0.74],
            name: "影响1",
          },
          {
            value: [0.1, 0.11, 0.13, 3.84, 2.5],
            name: "影响2",
          },
          {
            value: [7.91, 0.07, 1.58, 2.38, 0],
            name: "影响3",
          },
          {
            value: [0.03, 0, 0.12, 3.5, 2.34],
            name: "影响4",
          },
          {
            value: [0, 0, 0, 2.2, 1.47],
            name: "影响5",
          },
        ],
      },
      max: [
        { name: "影响1", max: 7.91 },
        { name: "影响2", max: 0.11 },
        { name: "影响3", max: 1.58 },
        { name: "影响4", max: 3.84 },
        { name: "影响5", max: 2.56 },
      ],
    };
  },
  methods: {},
  mounted() {},
};
</script>
